<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Sync Editor and Viewer Test</title>
  <script src="../../../src/kekule.js?min=false&modules=chemWidget,spectroscopy,algorithm,calculation,openbabel,indigo"></script>
  <link rel="stylesheet" type="text/css" href="../../../src/widgets/themes/default/kekule.css" />
  <style>
    #stage
    {
      display: flex;
    }
    #composer, #composer2, #viewer
    {
      flex: 1 1 auto;
      /*width: 500px;*/
      height: 400px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div id="stage">
    <div id="composer" data-widget="Kekule.Editor.Composer" data-resizable="true" data-predefined-setting="fullFunc"></div>
    <div id="viewer" data-widget="Kekule.ChemWidget.Viewer" data-resizable="true" data-predefined-setting="basic"></div>
    <div id="composer2" data-widget="Kekule.Editor.Composer" data-resizable="true" data-predefined-setting="fullFunc"></div>
  </div>


  <script>
    var composer, viewer, composer2;
    Kekule.X.domReady(()=>{
      composer = Kekule.Widget.getWidgetById('composer');
      composer2 = Kekule.Widget.getWidgetById('composer2');
      //composer.getEditor().enableOperContext = false;
      viewer = Kekule.Widget.getWidgetById('viewer');

      composer.on('operPush', e => {
        console.log('Push Operation', e.operation.getClassName)
      });
      composer.on('load', e=>{
        console.log('composer load');
        viewer.setChemObj(composer.getChemObj());
      });
      // composer.on(/*'editObjsUpdated'*/'userModificationDone', e=>{
      composer.on('editObjsUpdated', e=>{
      //composer.on('endManipulateObject', e=>{
        console.log('composer userModificationDone');

        // if (viewer.getChemObj() !== composer.getSavingTargetObj())
        // {
        //   viewer.setChemObj(composer.getSavingTargetObj());
        //   console.log('sync chemObj');
        // }
        if (viewer.getChemObj() !== composer.getChemObj())
        {
          viewer.setChemObj(composer.getChemObj());
          console.log('sync chemObj');
        }
        else
        {
          /*
          var painter = viewer.getPainter();
          painter.setRenderConfigs(viewer.getRenderConfigs());
          viewer.requestRepaint();
          */
          //viewer._doLoadOnObj(viewer.getChemObj(), {'refreshOnly': true, debug: true});
          //viewer.refitDrawContext(true);
          viewer.requestRepaint();
        }
        //viewer.setChemObj(composer.getChemObj());
      });
      composer.on('endManipulateObject', e=> {
        console.log('composer endManipulateObject');
      });
      composer.on('editObjsUpdated', e => {
        let obj = composer.getChemObj().clone();
        composer2.setChemObj(obj);
      })
    });
  </script>
</body>
</html>